<template >
  <el-form
    ref="clueRemarkRefForm"
    :model="clueRemark"
    label-width="110px"
    style="max-width: 95%"
  >
    <el-form-item label="负责人">
      <div class="desc">{{ clueDetail.ownerDO.name }}&nbsp;</div>
    </el-form-item>

    <el-form-item label="所属活动">
      <div class="desc">{{ clueDetail.activityDO.name }}&nbsp;</div>
    </el-form-item>

    <el-form-item label="姓名">
      <div class="desc">{{ clueDetail.fullName }}&nbsp;</div>
    </el-form-item>

    <el-form-item label="称呼">
      <div class="desc">{{ clueDetail.appellationDO.typeValue }}&nbsp;</div>
    </el-form-item>

    <el-form-item label="手机">
      <div class="desc">{{ clueDetail.phone }}&nbsp;</div>
    </el-form-item>

    <el-form-item label="微信">
      <div class="desc">{{ clueDetail.weixin }}&nbsp;</div>
    </el-form-item>

    <el-form-item label="QQ">
      <div class="desc">{{ clueDetail.qq }}&nbsp;</div>
    </el-form-item>

    <el-form-item label="邮箱">
      <div class="desc">{{ clueDetail.email }}&nbsp;</div>
    </el-form-item>

    <el-form-item label="年龄">
      <div class="desc">{{ clueDetail.age }}&nbsp;</div>
    </el-form-item>

    <el-form-item label="职业">
      <div class="desc">{{ clueDetail.job }}&nbsp;</div>
    </el-form-item>

    <el-form-item label="年收入">
      <div class="desc">{{ clueDetail.yearIncome }}&nbsp;</div>
    </el-form-item>

    <el-form-item label="住址">
      <div class="desc">{{ clueDetail.address }}&nbsp;</div>
    </el-form-item>

    <el-form-item label="贷款">
      <div class="desc">{{ clueDetail.needLoanDO.typeValue }}&nbsp;</div>
    </el-form-item>

    <el-form-item label="意向状态">
      <div class="desc">{{ clueDetail.intentionStateDO.typeValue }}&nbsp;</div>
    </el-form-item>

    <el-form-item label="意向产品">
      <div class="desc">{{ clueDetail.intentionProductDO.name }}&nbsp;</div>
    </el-form-item>

    <el-form-item label="线索状态">
      <div class="desc">{{ clueDetail.stateDO.typeValue }}&nbsp;</div>
    </el-form-item>

    <el-form-item label="线索来源">
      <div class="desc">{{ clueDetail.sourceDO.typeValue }}&nbsp;</div>
    </el-form-item>

    <el-form-item label="线索描述">
      <div class="desc">{{ clueDetail.description }}&nbsp;</div>
    </el-form-item>

    <el-form-item label="下次联系时间">
      <div class="desc">{{ clueDetail.nextContactTime }}&nbsp;</div>
    </el-form-item>

    <el-form-item label="填写跟踪记录" prop="noteContent">
      <el-input v-model="clueRemark.noteContent" :rows="8" type="textarea" />
    </el-form-item>
    <el-form-item label="跟踪方式" prop="noteWay">
      <el-select
        v-model="clueRemark.noteWay"
        placeholder="请选择跟踪方式"
        style="width: 100%"
        @click="loadDicValue('noteWay')"
        clearable
      >
        <el-option
          v-for="item in noteWayOptions"
          :key="item.id"
          :label="item.typeValue"
          :value="item.id"
        />
      </el-select>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="clueRemarkSubmit">提 交</el-button>
      <el-button
        type="success"
        @click="convertCustomer"
        v-if="clueDetail.state !== -1"
        >转换客户</el-button
      >
      <el-button type="success" plain @click="goBack">返 回</el-button>
    </el-form-item>
  </el-form>

  <el-table :data="clueRemarkList" style="width: 100%" :row-key="id">
    <el-table-column type="index" label="序号" width="60" />
    <el-table-column prop="noteWayDO.typeValue" label="跟踪方式" />
    <el-table-column prop="noteContent" label="跟踪内容" />
    <el-table-column property="createTime" label="跟踪时间" />
    <el-table-column property="createByDO.name" label="跟踪人" />
    <el-table-column property="editTime" label="编辑时间" />
    <el-table-column property="editByDO.name" label="编辑人" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button link type="success" @click="edit(scope.row.id)"
          >编辑</el-button
        >
        <el-button link type="danger" @click="del(scope.row.id)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
    v-show="clueTable"
    background
    layout="prev, pager, next"
    :page-size="pageSize"
    :total="total"
    @prev-click="toPage"
    @next-click="toPage"
    @current-change="toPage"
  />

  <!--线索转换为客户的弹窗（对话框）-->
  <el-dialog
    v-model="convertCustomerDialogVisible"
    title="线索转换客户"
    width="55%"
    center
  >
    <el-form
      ref="convertCustomerRefForm"
      :model="customerQuery"
      label-width="110px"
      :rules="convertCustomerRules"
    >
      <el-form-item label="选购产品" prop="product">
        <el-select
          v-model="customerQuery.product"
          placeholder="请选择"
          style="width: 100%"
          @click="loadDicValue('product')"
        >
          <el-option
            v-for="item in productOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="客户描述" prop="description">
        <el-input
          v-model="customerQuery.description"
          :rows="8"
          type="textarea"
          placeholder="请输入客户描述"
        />
      </el-form-item>
      <el-form-item label="下次跟踪时间" prop="nextContactTime">
        <el-date-picker
          v-model="customerQuery.nextContactTime"
          type="datetime"
          style="width: 100%"
          value-format="YYYY-MM-DD HH:mm:ss"
          placeholder="请选择下次跟踪时间"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="convertCustomerDialogVisible = false"
          >关 闭</el-button
        >
        <el-button type="primary" @click="convertCustomerSubmit"
          >转 换</el-button
        >
      </span>
    </template>
  </el-dialog>

  <!-- 编辑弹框 -->
  <el-dialog
    v-model="clueDialogVisible"
    width="55%"
    center
    draggable
    title="修改线索备注"
  >
    <el-form ref="clueEditForm" :model="clueEditQuery" :rules="clueRemarkRules">
      <el-form-item prop="noteContent">
        <el-input
          v-model="clueEditQuery.noteContent"
          type="textarea"
          :rows="10"
          placeholder="请输入活动备注"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="clueDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="clueEdit"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
import { doGet, doPost, doDelete, doPut } from "@/http/httpRequest";
import { messageTip, goBack, messageConfirm } from "@/util/util";
import { useRoute } from "vue-router";
const props = defineProps({
  reload: {
    type: Function,
    required: true,
  },
});
let clueDetail = reactive({
  ownerDO: {},
  activityDO: {},
  appellationDO: {},
  needLoanDO: {},
  intentionStateDO: {},
  intentionProductDO: {},
  stateDO: {},
  sourceDO: {},
});
const route = useRoute();
//线索跟踪记录对象，初始值是空
let clueRemark = reactive({});
//跟踪方式的下拉选项，初始值是空
let noteWayOptions = ref([{}]);
//线索跟踪记录列表，初始值是空
let clueRemarkList = ref([
  {
    noteWayDO: {},
    createByDO: {},
    editByDO: {},
  },
]);
//分页时每页显示多少条数据
let pageSize = ref(0);
let total = ref(0);
//定义转换客户的弹窗是否弹出来，默认是false不弹出来，true就弹出来
let convertCustomerDialogVisible = ref(false);
//线索转换为客户的form表单对象，初始值是空
let customerQuery = reactive({});
//意向产品的下拉选项，初始值是空
let productOptions = ref([{}]);
//定义线索转换为客户的验证规则
const { proxy } = getCurrentInstance();
let clueEditQuery = reactive({});
let clueDialogVisible = ref(false);
let clueRemarkRules = reactive({
  noteContent: [
    { required: true, message: "请输入线索备注", trigger: "blur" },
    {
      min: 5,
      max: 255,
      message: "线索备注长度为5-255个字符",
      trigger: "blur",
    },
  ],
});
let convertCustomerRules = reactive({
  product: [
    {
      required: true,
      message: "请选择意向产品",
      trigger: ["blur", "change"],
    },
  ],
  description: [
    { required: true, message: "客户描述不能为空", trigger: "blur" },
    {
      min: 5,
      max: 255,
      message: "客户描述长度为5-255个字符",
      trigger: "blur",
    },
  ],
  nextContactTime: [
    { required: true, message: "请选择下次联系时间", trigger: "blur" },
  ],
});
onMounted(() => {
  loadClueDetail();
  getClueRemarkList();
});
function loadClueDetail() {
  let id = route.params.id;
  doGet("/api/clue/load/" + id, {}).then((resp) => {
    if (resp.data.code === 200) {
      Object.assign(clueDetail, resp.data.data);
    }
  });
}
function clueRemarkSubmit() {
  doPost("/api/clue/remark", {
    clueId: clueDetail.id,
    noteContent: clueRemark.noteContent,
    noteWay: clueRemark.noteWay,
  }).then((resp) => {
    if (resp.data.code === 200) {
      messageTip("提交成功", "success");
      //刷新
      props.reload();
    } else {
      messageTip("提交失败", "error");
    }
  });
}
function loadDicValue(typeCode) {
  doGet("/api/dicvalue/" + typeCode, {}).then((resp) => {
    if (resp.data.code === 200) {
      if (typeCode === "noteWay") {
        noteWayOptions.value = resp.data.data;
      } else if (typeCode === "product") {
        productOptions.value = resp.data.data;
      }
    }
  });
}
function convertCustomer() {
  convertCustomerDialogVisible.value = true;
}
function convertCustomerSubmit(typeCode) {
  proxy.$refs.convertCustomerRefForm.validate((isValid) => {
    if (isValid) {
      doPost("/api/convertCustomer", {
        clueId: route.params.id,
        product: customerQuery.product,
        description: customerQuery.description,
        nextContactTime: customerQuery.nextContactTime,
      }).then((resp) => {
        if (resp.data.code === 200) {
          messageTip("转换成功", "success");
          //刷新
          props.reload();
        } else if (typeCode === "product") {
          messageTip("转换失败", "error");
        }
      });
    }
  });
}
function getClueRemarkList(current) {
  doGet("/api/clue/remark", {
    current: current,
    clueId: route.params.id,
  }).then((resp) => {
    if (resp.data.code === 200) {
      clueRemarkList.value = resp.data.data.list;
      clueRemarkList.length = resp.data.data.list.length;
      pageSize.value = resp.data.data.pageSize;
      total.value = resp.data.data.total;
    }
  });
}
function toPage(current) {
  getActivityRemarkList(current);
}
function del(id) {
  messageConfirm("你确定要删除数据吗?")
    .then(() => {
      doDelete("/api/clue/remark/" + id, {}).then((resp) => {
        if (resp.data.code === 200) {
          messageTip("删除成功", "success");
          props.reload();
        } else {
          console.log(resp.data);
          messageTip("删除失败,原因：" + resp.data.msg, "error");
        }
      });
    })
    .catch(() => {
      messageTip("取消删除", "warning");
    });
}
function edit(id) {
  clueDialogVisible.value = true;
  loadClue(id);
}
function loadClue(id) {
  doGet("/api/clue/remark/" + id, {}).then((resp) => {
    if (resp.data.code === 200) {
      Object.assign(clueEditQuery, resp.data.data);
    }
  });
}
function clueEdit() {
  proxy.$refs.clueEditForm.validate((isValid) => {
    if (isValid) {
      doPut("/api/clue/remark/edit", {
        id: clueEditQuery.id,
        noteContent: clueEditQuery.noteContent,
      }).then((resp) => {
        if (resp.data.code === 200) {
          messageTip("提交成功", "success");
          props.reload();
        } else {
          messageTip("提交失败", "fail");
        }
      });
    }
  });
}
goBack;
</script>
